<template>
  <view>
    <view>
      <el-radio-group v-model="page" size="large" @change="radioChange">
        <view v-for="(item, index) in pages"> <el-radio-button  :label="index + 1" /></view>
      </el-radio-group>
    </view>
    <view>
      <view style="width: 100%; height: 100%" v-if="playerUrl">
        <iframe style="width: 100%; height: 60vh; border: 0" frameborder="0" :src="playerUrl"></iframe>
      </view>
    </view>
  </view>
</template>
<script setup>
import Cookies from "js-cookie";
import { inject, onMounted } from "vue";
import request from "@/utils/request";
const page = ref(1);
const host = inject("host");
const pages = ref([]);
const playerUrl = ref(null);
const video = ref(null);
onMounted(() => {
  let playVideoStr = Cookies.get("playVideo");
  let playVideo = JSON.parse(playVideoStr);
  console.log(playVideo);
  // 获取bid
  let bid = playVideo.bid;
  request({
    url: host + "/video/parse/" + bid,
    method: "get",
  }).then((res) => {
    console.log(res);
    pages.value = res.pages;
   
  setPlayerUrl();
  });
  video.value = playVideo;
});
// 设置播放地址
function setPlayerUrl() {
  playerUrl.value = host+'/video/render?url='+ encodeURIComponent("player.bilibili.com/player.html?aid=480067424&bvid="+ video.value.bid+ "&cid="+pages.value[page.value - 1].cid+'&page='+page.value) 
   console.log(playerUrl.value)
}
function radioChange() {
    playerUrl.value = null;
  setPlayerUrl();
}
</script>
